How to make a dropdown menu in Bootstrap 4?

With Bootstrap 4, you apply the .dropdown-item to a or element and apply the .dropdown-menu class to their wrapper element. You can reverse the dropdown so that it becomes a "dropup" menu. To do this, use .dropup instead of .dropdown on the parent element.

How to add a dropdown element in Bootstrap?

Add Bootstrap's .dropdown-toggle class and add data-toggle="dropdown" to the trigger element (i.e. the element that users click on to expand the dropdown). In the above example, the trigger is a element. Each dropdown item uses the element (but can also use the element) with a class of .dropdown-item.

How do I open a dropdown menu?

To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle="dropdown" attribute. Add the .dropdown-menu class to a element to actually build the dropdown menu. Then add the .dropdown-item class to each element (links or buttons) inside the dropdown menu.